<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="giftObj" label-width="100px" slot="form" ref="giftObj" class="giftObj">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="类目">
                           <el-select v-model="giftObj.typeReport2" style="width:100%" >
                                <el-option v-for="item in giftObj.typeReportList2" :key="item.typeId" :label="item.typeName" :value="item.typeId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="类型">
                             <el-select v-model="giftObj.typeStatus2" style="width:100%" >
                                <el-option v-for="item in giftObj.statusType2" :key="item.typeId" :label="item.typeName" :value="item.typeId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="赠予/赠送人ID">
                            <el-input v-model="giftObj.donate" placeholder="请输入赠予/赠送人ID" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="日期范围">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker v-model="giftObj.startDate" :editable="false" type="date" placeholder="选择时间日期" @change="dateChange1" :picker-options="giftObj.pickerOptions1" style="width:100%"></el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="giftObj.endDate" :editable="false" type="date" placeholder="选择时间日期" @change="dateChange2" :picker-options="giftObj.pickerOptions2" style="width:100%"></el-date-picker>
                                </el-col>
                            </el-row>             
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div>
                    <el-button @click="goBalance">查看余额账户</el-button>
                    <el-button @click="exportBtn">导出</el-button>
                </div>
                <div class="btnPosition">
                    <span class="table-title-span">当前礼物：{{currentGift}} <span class="note">（换算成积分）</span></span>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" border v-loading="loading" ref="multipleTable">

                <el-table-column label="时间" align="center"> 
                    <template scope="scope">
                        <span>{{scope.row.createTime || '--'}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="类目" align="center" prop="kind"></el-table-column>

                <el-table-column label="类型" align="center" prop="type"></el-table-column>

                <el-table-column label="额度" align="center" prop="score"></el-table-column>
                
                <el-table-column label="赠予/赠送人ID" align="center" prop="reciveId"></el-table-column>

            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import {pageUserGiftDetail, getUserGift} from 'api/accountMagement';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import moment from 'moment';
export default{
    components: {TableLayout},
    data() {
        return {
            currentGift: '',
            dataApply: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            giftObj: {
                startDate: '',
                endDate: '',
                typeReport2: '',
                donate: '',
                typeStatus2: '',
                pickerOptions1: {},
                pickerOptions2: {},
                typeReportList2: [
                    {
                        typeName: '全部',
                        typeId: ''
                    },
                    {
                        typeName: '礼物流通',
                        typeId: '5'
                    }
                ],
                statusType2: [
                    {
                        typeId: '',
                        typeName: '全部'
                    },
                    {
                        typeId: '0',
                        typeName: '收到礼物'
                    },
                    {
                        typeId: '1',
                        typeName: '赠出礼物'
                    }
                ]
            },
            
            loading: false,
            multipleSelection: []// 列表行数
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    // 初始化
    created() {
        this.searchFetchData();
        this.getGift();
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        dateChange1(date) {
            this.giftObj.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            };
        },

        // 功能：结束日期选择
        dateChange2(date) {
            this.giftObj.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            };
        },

        // 查询用户当前礼物
        getGift() {
            getUserGift(this.$route.params.id).then(res => {
                this.currentGift = res.data.content.presentGift;
            })
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            let startDate = this.giftObj.startDate==''?'':moment(this.giftObj.startDate).format('YYYY-MM-DD');// 开始时间格式处理
            let endDate = this.giftObj.endDate==''?'':moment(this.giftObj.endDate).format('YYYY-MM-DD');// 结束时间格式处理
            this.loading = true;
            pageUserGiftDetail(
            this.listQuery.page, 
            this.config.pageSize,
            this.$route.params.id,
            startDate, 
            endDate, 
            this.giftObj.typeStatus2, // 类型
            this.giftObj.donate, // 赠送人ID
            this.giftObj.typeStatus2, // 类目
            ).then(response => {
                this.loading = false;         
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
            });
        },

        onSubmit() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
        goBalance() {
            this.$router.push({path: `/accountExUser/checkFigure/${this.$route.params.id}`});
        },
        // 导出
        exportBtn() {
            let startDate = this.giftObj.startDate==''?'':moment(this.giftObj.startDate).format('YYYY-MM-DD');// 开始时间格式处理
            let endDate = this.giftObj.endDate==''?'':moment(this.giftObj.endDate).format('YYYY-MM-DD');// 结束时间格式处理
            window.location.href = `${LOCAL_API.bsp}/balanceScore/exportUserGiftDetail?userId=${this.$route.params.id}&startTime=${startDate}&endTime=${endDate}&kind=${this.giftObj.typeReport2}&type=${this.giftObj.typeStatus2}&receiveId=${this.giftObj.donate}`;    
        }
    }
}
</script>
<style lang="scss" scoped >
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .btnPosition{
        font-size:14px !important;
        color:#333;
        line-height:35px;
    }
}
</style>